<template>
    <d2-container>

        <el-form :inline="true" :model="dataSearch" ref="dataSearch">

            <el-form-item label="员工姓名" prop="name">
                <el-input v-model="dataSearch.name" placeholder="请输入员工姓名"></el-input>
            </el-form-item>
            <el-form-item label="年份" >
                <el-input v-model="dataSearch.year" placeholder="请输入年份"></el-input>
            </el-form-item>
            <el-form-item label="周/月报" >
                <el-select v-model="dataSearch.type" clearable placeholder="类型">
                    <el-option
                            v-for="item in typeList"
                            :key="item.value"
                            :label="item.name"
                            :value="item.value"
                    ></el-option>
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="formSubmit">
                    <d2-icon name="search"/>
                    查询
                </el-button>
            </el-form-item>

            <el-form-item>
                <el-button @click="formReset">
                    <d2-icon name="refresh"/>
                    重置
                </el-button>
            </el-form-item>

            <a href="#/report">
                <el-button type="primary" style="float:right" >新建周报</el-button>
            </a>
            <a href="#/month-report">
                <el-button type="primary" style="float:right;margin-right: 10px" >新建月报</el-button>
            </a>
        </el-form>
        <el-table :data="dataList" border style="width: 100%">
            <el-table-column prop="staff.name" label="员工姓名"></el-table-column>
            <el-table-column prop="year" label="年份"></el-table-column>
            <el-table-column prop="month" label="月"></el-table-column>
            <el-table-column prop="week" label="周" v-if='dataSearch.type == 0'></el-table-column>
            <el-table-column prop="typeText" label="类型" ></el-table-column>
            <el-table-column fixed="right" label="操作">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                    <el-button @click="deleteClick(scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                background
                layout="total,sizes,prev, pager, next,jumper"
                :page-size="pageSize"
                :current-page="currentPage"
                :total="total"
                @current-change="handleCurrentChange"
                @size-change="handlerSizeChange"
                @next-click="handleNextPage"
                @prev-click="handlePrevClick"
        ></el-pagination>
    </d2-container>
</template>

<script>
    import request from "@/plugin/axios";
    import {mapState} from "vuex";
    export default {
        data() {
            return {
                dataSearch: {
                    name: "",
                    year: "",
                    type:0
                },
                typeList : [{value:0,name:'周报'},{value:1,name:'月报'}],
                total: 0,
                pageSize: 20,
                currentPage: 1,
                dataList : []


            };
        },
        computed: {
            ...mapState('d2admin/user', ['info']),
        },
        methods: {
            formSubmit() {
                this.getDataList(1, this.pageSize);
            },
            formReset() {
                this.$refs.dataSearch.resetFields();
                this.getDataList(1,this.pageSize)
            },
            handleClick(e) {
                if (this.dataSearch.type == 0){
                    this.$router.push({path: "/report?id=" + e._id});
                }
                else{
                    this.$router.push({path:'/month-report?id=' + e._id})
                }
            },
            deleteClick(e) {
                this.$confirm("此操作将删除该报表, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(() => {
                        request({
                            url: "/staff/deleteReport",
                            method: "post",
                            data: {id: e._id}
                        }).then(res => {
                            if (res.code == 200) {
                                this.$message({
                                    message: "删除成功"
                                });
                                this.getDataList(1, this.pageSize);
                            }
                        });
                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "已取消删除"
                        });
                    });
            },
            handleCurrentChange(e) {
                this.getDataList(e, this.pageSize);
            },
            handlerSizeChange(e) {
                this.pageSize = e;
                this.getDataList(1, this.pageSize);
            },
            handleNextPage(e) {
                this.getDataList(e, this.pageSize);
            },
            handlePrevClick(e) {
                this.getDataList(e, this.pageSize);
            },
            getDataList(page, pageSize) {
                let data = {};
                if (this.staff){
                    data.staff = this.staff
                }

                if (this.dataSearch.name != "") {
                    data.name = this.dataSearch.name;
                }
                if (this.dataSearch.year != "") {
                    data.year = this.dataSearch.year;
                }
                if (this.dataSearch.type != -1){
                    data.type = this.dataSearch.type 
                }
                
                (data.page = page), (data.pageSize = pageSize);
                data.school = this.info.school.map(value => value._id)

                request({
                    url: "/staff/getReportList",
                    method: "post",
                    data
                }).then(res => {
                    this.dataList = res.data.data;
                    this.dataList.forEach(e=>{
                        e.typeText = (this.dataSearch.type == 0 ? '周报' : '月报')
                    })

                    this.total = res.data.count;
                    // 返回数据
                });
            },

            
            getSchoolList() {

                this.schoolList = this.info.school;

            },
            load(){
                 if (( this.info.school[0].headquarter == 1) || ( this.info.school[0].headquarter == 2)){
                this.headquarter = true
            }
            this.rights = this.info.rights.map(function(e){return e.name})
            let index1 = this.rights.indexOf('root') == -1
            let index2 = this.rights.indexOf('校长') == -1
            index1 = index1 && index2
            this.staff = this.info.staff == undefined ? null : this.info.staff._id
            if (index1){
                
                if (this.staff == null){
                    this.$alert('','请绑定员工')
                }
            }
                if ((this.staff != null) && (!index1)){
                    this.getDataList(1, this.pageSize);
                }
                
            }
        },

beforeRouteEnter(to,from,next){
            if (to.meta.refresh == 'a'){
                to.meta.refresh = undefined
                next(v=>{
                    v.load()
                })
            }
            else{
                next()
            }

        },

        created() {
            
           this.load()

        }
    };
</script>
